<template>
  <div id="header">
    <header class="flex-row-c">
      <div class="container flex-row-sb-c">
        <NuxtLink to="/">
        <img
          src="@/assets/images/logo.png"
          alt="熊猫不走蛋糕"
          class="nav_logo"
        />
        </NuxtLink>
        <ul role="nav" class="index_nav flex-row-c-c">
          <li
            v-for="(item, index) in lists"
            :key="index"
            :class="currNav == item.id ? 'curr_focus' : ''"
          >
            <NuxtLink :to="item.url" @click="onGoPath">{{
              item.title
            }}</NuxtLink>
          </li>
        </ul>
        <div class="contact_us flex-row-c">
          <div class="show_iframe flex-row-c" @click="openIframe">
            <img src="@/assets/images/on_line.png" alt="" class="online" />
            <span>在线客服</span>
          </div>
          <div class="flex-row-c">
            <img src="@/assets/images/tel.png" alt="" class="tel" />
            <span>952014</span>
          </div>
        </div>
      </div>
      <div class="applets_qrcode flex-col-c-c">
        <img src="@/assets/images/applets_qrcode.jpg" class="big_qrcode" />
        <div class="applets-qrcode-text">扫码查看</div>
        <div class="applets-qrcode-text">更多蛋糕</div>
      </div>
      <div class="flex-row-c back_top" @click="toTop" v-show="canToTop">
        <div class="arrow_top"></div>
      </div>
    </header>
    <ContactService ref="iframeWindow" />
  </div>
</template>

<script lang="ts">
import { link } from '~/types'
import LinkItem from '~~/components/LinkItem.vue'
import ContactService from './ContactService.vue'
import { useRoute } from 'vue-router'
export default {
  transition:'bounce',
  components: {
    LinkItem,
    ContactService,
  },
  setup() {
    var exclude = ref(false)
    const route = useRoute()
    var currNav = ref(1)
    const iframeWindow = ref(null)
    const canToTop = ref(false)
    const handlerScroll = () => {
      var myScrollTop =
        document.documentElement.scrollTop || document.body.scrollTop
      myScrollTop > 760 ? (canToTop.value = true) : (canToTop.value = false)
    }
    const toTop = () => {
      // 实现滚动效果
      var myTop = document.documentElement.scrollTop || document.body.scrollTop
      const timeTop = setInterval(() => {
        document.body.scrollTop =
          document.documentElement.scrollTop =
          myTop -=
            180
        if (myTop <= 0) clearInterval(timeTop)
      }, 10)
    }
    const lists = ref<link[]>([
      { id: 1, title: '首页', url: '/' },
      { id: 2, title: '美味蛋糕', url: '/cakes' },
      { id: 3, title: '新闻动态', url: '/news/1' },
      { id: 4, title: '关于我们', url: '/about' },
    ])
    const onGoPath = () => {
      document.documentElement.scrollTop = 0
    }
    const openIframe = () => {
      iframeWindow.value.changeIframe()
      exclude.value = !exclude.value
    }
    watch(
      () => route.fullPath,
      (newVal) => {
        if (newVal == '/') {
          currNav.value = 1
        }
        if (newVal.includes('cake')) {
          currNav.value = 2
        }
        if (newVal.includes('news')) {
          currNav.value = 3
        }
        if (newVal.includes('about')) {
          currNav.value = 4
        }
      },
      {
        immediate: true,
      }
    )
    onMounted(() => {
      window.addEventListener('scroll', handlerScroll, true)
    })
    return {
      toTop,
      canToTop,
      lists,
      currNav,
      iframeWindow,
      onGoPath,
      openIframe,
    }
  },
}
</script>

<style lang="scss">
#header {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 999;
  header {
    display: flex;
    justify-content: center;
    height: 100px;
    background: #fff;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 999;
  }
  .applets_qrcode {
    position: fixed;
    bottom: 20%;
    right: 20px;
    border-radius: 2px;
    z-index: 999;
    padding:  10px;
    background-color: white;
    box-shadow: 0px 2px 6px #ddd;
    .big_qrcode {
        width: 150px;
        height: 150px;
        // margin-bottom: 10px;
    }
    .applets-qrcode-text {
      letter-spacing: 18px;
      text-indent: 18px;
      text-align: center;
    }
    div {
      img {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        margin: 7px;
      }
      p {
        font: 400 16px 'PingFang SC';
      }
    }
    
  }
  .back_top {
    position: fixed;
    bottom: 13%;
    right: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border-radius: 4px;
    background-color: #ddd;
    cursor: pointer;
    z-index: 999;
    animation: fade-in 0.5s linear forwards;
    @keyframes fade-in {
      0% {
        opacity: 0;
      }
      50% {
        opacity: 0.5;
      }
      100% {
        opacity: 1;
      }
    }
    .arrow_top {
      width: 24px;
      height: 24px;
      background: url('@/assets/images/arrow-up.png') no-repeat;
      background-position: center;
    }
  }

  .container {
    width: 65%;
    height: 100%;
    padding: 10px;
    .nav_logo {
      width: 200px;
      margin-right: 92px;
    }
    .index_nav {
      li {
        a {
          font: 400 19px 'PingFang SC' !important;
          color: #212121;
        }
        margin-right: 60px;
      }
      .curr_focus {
        a {
          color: #ffb5b5;
        }
      }
    }
    .wechat_applets {
      width: 19px;
      height: 19px;
      border-radius: 50%;
      margin-right: 8px;
    }
    .applets_qrcode {
      position: absolute;
      top: 108px;
      right: 300px;
      width: 200px;
      height: 200px;
      background-color: white;
      z-index: 9;
      img {
        border-radius: 50%;
      }
    }
    .contact_us {
      .show_iframe {
        cursor: pointer;
      }
      div {
        margin-right: 20px;
      }
      img {
        width: 18px;
        height: 18px;
        border-radius: 999px;
        margin-right: 11px;
      }
      span {
        font: 400 19px 'PingFang SC';
      }
    }
  }
}
</style>
